<template>
  <!-- 自定义导航栏的外层容器 -->
  <view :style="{ height: `${navBarHeight}px` }">
    <view
      class="customHeader"
      :class="{ fixedView: fx, borderView: br }"
      :style="{
        paddingTop: `${statusBarHeight}px`,
        background: `${bg}`,
        height: `${navBarHeight}px`,
        color: `${cr}`,
      }"
    >
      <!-- 左侧返回按钮 -->
      <view class="left">
        <wd-icon v-if="back" @click="goBack" name="thin-arrow-left" size="16px"></wd-icon>
      </view>
      <!-- 中间标题 -->
      <view class="title font-bold">{{ title }}</view>
      <!-- 右侧可以添加其他按钮或图标 -->
      <view class="right">
        <!-- 预留区域 -->
      </view>
    </view>
  </view>
</template>

<script>
import { defineComponent, ref, onMounted } from 'vue'

export default defineComponent({
  name: 'customHeader', // 组件名称
  props: {
    title: {
      type: String,
      default: '标题', // 默认标题
    },
    // 背景色
    bg: {
      type: String,
      default: '#fff', // 默认白色
    },
    // 文字颜色
    cr: {
      type: String,
      default: '#333', // 默认黑色
    },
    // 边框和阴影
    br: {
      type: Boolean,
      default: true, // 默认有边框
    },
    // 返回按钮
    back: {
      type: Boolean,
      default: true, // 默认有返回按钮
    },
    // 固定高度
    fx: {
      type: Boolean,
      default: true, // 默认固定
    },
  },
  setup() {
    // 定义状态栏高度和导航栏高度的响应式变量
    const statusBarHeight = ref(0)
    const navBarHeight = ref(0)

    // 返回上一个页面的方法
    const goBack = () => {
      uni.navigateBack()
    }

    // 组件挂载时获取系统信息并计算导航栏高度
    onMounted(() => {
      const systemInfo = uni.getSystemInfoSync()
      statusBarHeight.value = systemInfo.statusBarHeight // 获取状态栏高度
      // 根据平台计算导航栏高度
      navBarHeight.value =
        systemInfo.platform === 'android'
          ? statusBarHeight.value + 48 // Android 导航栏高度
          : statusBarHeight.value + 44 // iOS 导航栏高度
    })

    // 返回响应式变量和方法供模板使用
    return {
      statusBarHeight,
      navBarHeight,
      goBack,
    }
  },
})
</script>

<style scoped>
/* 导航栏样式 */
.customHeader {
  position: relative;
  z-index: 99;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10rpx;
}

.borderView {
  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1);
}
.fixedView {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  left: 0 !important;
}
/* 左右两侧按钮区域样式 */
.left,
.right {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50rpx;
}
/* 中间标题样式 */
.title {
  flex: 1;
  font-size: 36rpx;
  text-align: center;
}
/* 图标字体样式 */
.iconfont {
  font-size: 20rpx;
}
</style>
